<template>
    <div class="login">
        <div class="contents">
            <div class="logo-box">
                <img src="" alt="">
            </div>
            <div class="login-form">
                <div class="slider-bg">
                    <img :src="loginBg" alt="">
                </div>
                <div class="form">
                    <div class="form-name">登录</div>
                    <Form>
                        <FormItem>
                            <i-input type="text" placeholder="请输入用户名" v-model.trim="user.userName"
                            >
                            <Icon type="md-person" slot="prepend" />
                            </i-input>
                        </FormItem>
                        <FormItem>
                            <i-input type="password" placeholder="请输入用户密码" v-model="user.passWord">
                            <Icon type="md-lock" slot="prepend"/>
                            </i-input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click.stop="login">登录</Button>
                        </FormItem>
                        <FormItem v-if="false">
                            <Checkbox></Checkbox>自动登录
                            <div class="right">
                            <span>忘记密码</span>
                            <span @click="goRegister">注册账户</span>
                        </div>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {logins} from '@/js/api'
// import md5 from 'md5'
import {setDb, getDb} from '@/js/common'
export default {
    name: 'login',
    data () {
        return {
            loginBg: require('../assets/login.jpg'),
            user: {
                userName: '',
                passWord: ''
            }
        }
    },
    created () {
        if (getDb('token')) {
            this.$router.replace('home')
        }  
    },
    methods: {
        login () {
            const {userName, passWord} = this.user
            if (userName == '') {
                this.$Message.info('请输入用户名')
                return
            }
            if (passWord == '') {
                this.$Message.info('请输入密码')
                return
            }
            logins({
                userName,
                password: passWord
            }).then(r => {
                if (r.code == 200 && r.msg == 'sucess') {
                    this.$Message.success('登录成功')
                    const {data}  = r
                    setDb('token', data)
                    setDb('userName', userName)
                    setTimeout(() => {
                        this.$router.push('/home')
                    }, 1000)
                } else {
                    this.$Message.error(r.msg)
                }
            })
        },
        goRegister () {
            this.$router.push('/residence-type')
        }
    }
}
</script>
<style scoped lang="less">
.login {
    width: 100%;
    height: 100%;
    background: #023154 ;
    overflow: hidden;
    .contents {
        width: 1000px;
        height: 635px;
        margin: 40px auto 0;
        .logo-box {
            height: 70px;
            margin-bottom: 24px;
            img {
                display: inline-block;
                width: 175px;
                height: 70px;
                background: #f00;
                opacity: 0;
            }
        }
        .login-form {
            width: 100%;
            height: 540px;
            display: flex;
            border-radius: 10px;
            background: #fff;
            .form {
                width: 578px;
                padding: 120px;
                .form-name {
                    text-align: center;
                    color: #1298FC;
                    font-size: 30px;
                    padding-bottom: 40px;
                }
                button {
                    width: 100%;
                }
                .right {
                    float: right;
                    font-size: 12px;
                    color: #999;
                    span {
                        cursor: pointer;
                        &:first-child {
                            margin-right: 20px;
                        }
                    }
                }
            }
            .slider-bg {
                background: #0392F4;
                flex: 1;
                border-radius: 10px 0 0 10px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px 0 0 10px;
                }
            }
        }
    }
}
</style>